<template>
  <view class="content">
    <view class="searchBox">
      <image class="searchImg" src="../../static/img/magnifier.png" mode=""></image>
      <input class="ipt" v-model="queryInfo.search_data" type="text" placeholder="输入用户昵称或ID"
        placeholder-style="color: rgba(0,0,0,0.4);" confirm-type="search"  @confirm="search_common_user">
      <view class="searchBtn" @tap="search_common_user()">
        搜索
      </view>
    </view>
    <view class="list">
      <view class="item" v-for="(item,i) in list" :key="i">
        <image v-if="!item.flag" class="radioImg" src="../../static/img/radio.png" mode="" @tap="check(item)">
        </image>
        <image v-else class="radioImg" src="../../static/img/radio1.png" mode="" @tap="check(item)"></image>
        <view class="herder">
          <image class="herderImg" :src="item.avatar" mode=""></image>
          <view class="name">
            {{item.nickname}}
          </view>
          <view class="idCard">
            <span v-for="(item1,i1) in item.identity_data" :key="i1">{{item1}}</span>
          </view>
        </view>
        <view class="contentBox">
          <view class="address">
            省市区：北京朝阳区
          </view>
          <view class="grend">
            <span>性别：<span v-if="item.gender == 1">男</span><span v-if="item.gender == 2">女</span></span>
            <image v-if="item.gender == 1" src="../../static/img/man.png" mode=""></image>
            <image v-if="item.gender == 2" src="../../static/img/women.png" mode=""></image>
          </view>
        </view>
        <view class="idBox">
          用户ID：{{item.uid}}
        </view>
      </view>
    </view>
    <view class="bottomBox">
      <view class="btn" @tap="invite">
        确认邀请
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        queryInfo: {
          search_data: ''
        },
        list: [],
        user_id: '',
        nickname: '',
        value: ''
      }
    },
    onShow() {
      this.search_common_user()
    },
    onLoad(obj) {
      this.value = obj.value
    },
    methods: {
      invite() {
        this.list.forEach((item) => {
          if (item.flag == true) {
            this.user_id += item.id + ','    
            this.nickname = this.nickname + item.nickname + ' '
          }
        })
        this.user_id = this.user_id.substr(0, this.user_id.length - 1);
        uni.navigateTo({
          url: '../addOrder/addOrder?user_id=' + this.user_id + '&nickname=' + this.nickname + '&value=' + this.value
        })
      },
      async search_common_user() {
        const {
          data: res
        } = await uni.$http.post('others/search_common_user', this.queryInfo)
        if (res.code != 1) {
          this.toast.msg(res.msg)
          return
        }
        res.data.forEach((item) => {
          item.flag = false
        })
        this.list = res.data
        console.log(this.list);
      },
      check(item) {
        this.list.forEach((i) => {
          if (item.id == i.id) {
            item.flag = !item.flag
          }
        })
      }
    }
  }
</script>

<style lang="scss">
  .content {
    min-height: 100vh;
    background-color: #F2F3F6;
    padding-bottom: 200rpx;

    .searchBox {
      position: relative;
      display: flex;
      align-items: center;
      box-sizing: border-box;
      padding-left: 32rpx;
      height: 102rpx;
      background-color: #fff;

      .searchImg {
        position: absolute;
        left: 52rpx;
        top: 34rpx;
        width: 40rpx;
        height: 40rpx;
      }

      .ipt {
        box-sizing: border-box;
        width: 600rpx;
        height: 60rpx;
        background: #F2F3F6;
        border-radius: 124rpx;
        margin-right: 20rpx;
        padding-left: 64rpx;
        font-size: 24rpx;
      }

      .searchBtn {
        font-size: 30rpx;
        font-family: PingFang SC-Medium, PingFang SC;
        font-weight: 500;
        color: #7D81A9;
      }
    }

    .list {
      .item {
        position: relative;
        width: 686rpx;
        height: 208rpx;
        background: #FFFFFF;
        border-radius: 16rpx;
        margin: 0 auto;
        margin-top: 24rpx;
        padding: 32rpx 0 0 24rpx;
        box-sizing: border-box;

        .radioImg {
          position: absolute;
          bottom: 148rpx;
          right: 24rpx;
          width: 36rpx;
          height: 36rpx;
        }

        .herder {
          display: flex;

          .herderImg {
            width: 36rpx;
            height: 36rpx;
          }

          .name {
            margin: 0 8rpx;
            font-size: 24rpx;
            font-family: PingFang SC-Regular, PingFang SC;
            font-weight: 400;
            color: rgba(0, 0, 0, 0.6);
          }

          .idCard {
            height: 24rpx;
            line-height: 24rpx;

            span {
              padding: 0 8rpx;
              font-size: 18rpx;
              background-color: #ADA0FF;
              border-radius: 10rpx 0;
              color: #fff;
              margin-right: 8rpx;
            }
          }
        }

        .contentBox {
          display: flex;
          font-size: 24rpx;
          color: rgba(0, 0, 0, 0.8);
          margin: 32rpx 0 12rpx;

          .grend {
            margin-left: 64rpx;

            image {
              width: 24rpx;
              height: 24rpx;
              margin-left: 16rpx;
            }
          }
        }

        .idBox {
          font-size: 24rpx;
          color: rgba(0, 0, 0, 0.8);
        }
      }
    }

    .bottomBox {
      position: fixed;
      bottom: 0;
      left: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 176rpx;
      background: #FFFFFF;
      border-radius: 28rpx 28rpx 0rpx 0rpx;

      .btn {
        width: 666rpx;
        height: 80rpx;
        text-align: center;
        line-height: 80rpx;
        background: #7D81A9;
        border-radius: 40rpx;
        font-size: 28rpx;
        font-family: PingFang SC-Medium, PingFang SC;
        font-weight: 500;
        color: #FFFFFF;
      }
    }
  }
</style>